<template>

    理财编号：<input type="text" v-model="Fid" />
    理财名称：<input type="text" v-model="Fname" />
    理财收益：<input type="text" v-model="MinFapy" />-<input type="text" v-model="Maxfapy" />
    <button class="btn btn-primary" @click="loadData">查询</button>
    <button class="btn btn-danger" @click="onDeleteRange">批量删除</button>

    <table class="table table-bordered">
        <thead>
            <tr style="background-color: cyan;">
                <td>
                    <input type="checkbox" v-model="allselect" @change="onchangeAllSelect" />全选
                </td>
                <td>理财编号</td>
                <td>理财名称</td>
                <td>年收益</td>
                <td>月收益</td>
                <td>最低金额</td>
                <td>理财人数</td>
                <td>风险等级</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="finan in finans">
                <td>
                    <input type="checkbox" v-model="itemSelected" @change="onChangeItemSelect" :value="finan.F_id" />
                </td>
                <td>{{ finan.F_id }}</td>
                <td>{{ finan.F_name }}</td>
                <td>{{ finan.F_APY }}</td>
                <td>{{ (finan.F_APY / 12).toFixed(2) }}</td>
                <td>{{ (finan.F_MinMoney).toFixed(2) }} CNY </td>
                <td>{{ finan.F_Number }}</td>
                <td>{{ finan.F_Level == 0 ? "低风险" : finan.F_Level == 1 ? "中风险" : "高风险" }}</td>
                <td>
                    <slot :id="finan.F_id">

                    </slot>
                </td>
            </tr>
        </tbody>
    </table>

    <span>
        数据共{{ totalCount }}条，每页{{ pageSize }}条，当前第{{ pageIndex }}/{{ pageCount }}页
        <a href="#" @click="PageLoad('F')">首页</a> |
        <a href="#" @click="PageLoad('P')">上一页</a>|
        <a href="#" @click="PageLoad('N')">下一页</a>|
        <a href="#" @click="PageLoad('E')">尾页</a>

        <select v-model="Csize" @change="ChangeSize">
            <option value="1">1条/页</option>
            <option value="2">2条/页</option>
            <option value="3">3条/页</option>
        </select>
        跳转到第
        <input type="text" v-model="Nindex" style="width: 40px;" />
        页
        <button class="btn btn-success" @click="TakeInfo">跳转</button>
    </span>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router'

const router = useRouter();

//初始化全选
const allselect = ref(false)
//初始化反选
const itemSelected = ref([])
//全选
const onchangeAllSelect = (e: any) => {
    var isChecked = e.target.checked
    console.log(isChecked)
    if (isChecked) {
        // itemSelected.value=finans.value.map(x=>x.F_id);
        var fids = finans.value.map(x => x.F_id);
        itemSelected.value =fids
    } else {
        itemSelected.value = [];
    }
    console.log(itemSelected.value)
}
//反选
const onChangeItemSelect = () => {
    console.log(itemSelected);

    if (itemSelected.value.length != finans.value.length) {
        allselect.value = false;
    } else {
        allselect.value = true;
    }
}
//批量删除
const onDeleteRange = () => {
    var ids = itemSelected.value;
    console.log(ids);
    axios.post("https://localhost:44387/api/Finans/DeleteRangeData", ids)
        .then(res => {
            //处理响应数据
            console.log(res.data);
            if (res.data > 0) {
                alert("理财信息删除成功!共删除"+res.data+"条数据");
                loadData();
                allselect.value=false;
            }
            else if (res.data == -1) {
                alert("理财人数大于0 不能删除")
            }
            else {
                alert("理财信息删除失败");
            }

            //刷新页面
            window.location.reload();
        })
        .catch(error => {
            //处理错误
            console.log(error);
        })
}

const finans = ref([
    {
        F_id: '',
        F_name: '',
        F_APY: 0,
        F_Level: 0,
        F_MinMoney: 0,
        F_Number: 0,
        I_Id: 0,
        I_Interst: '',
    }
]);

const Fid = ref('');
const Fname = ref('');
const MinFapy = ref('');
const Maxfapy = ref('');
const pageIndex = ref(1);
const pageSize = ref(2);
const totalCount = ref(0);
const pageCount = ref(0);

const Csize = ref(2);
const Nindex = ref("");

onMounted(() => {
    loadData();
});
const loadData = () => {

    axios.get('https://localhost:44387/api/Finans/SwhoFinanInfo', {
        params: {

            Fname: Fname.value,
            Fid: Fid.value,
            MinFapy: MinFapy.value,
            Maxfapy: Maxfapy.value,
            pageIndex: pageIndex.value,
            pageSize: pageSize.value
        }
    })
        .then(res => {
            finans.value = res.data.List;
            console.log(res.data);

            totalCount.value = res.data.totalCount;
            console.log(res.data.totalCount);
            pageCount.value = res.data.pageCount;
            console.log(res.data.pageCount);
        }).catch(error => {
            console.error(error);
        });
}
const PageLoad = (choose: string) => {
    switch (choose) {
        case "F":
            pageIndex.value = 1;
            break;
        case "P":
            //当前页索引必须大于1
            if (pageIndex.value > 1) {
                pageIndex.value--;
            }
            else {
                alert("已经是第一页了");
            }
            break;
        case "N":
            //当前页索引必需小于总页数
            if (pageIndex.value < pageCount.value) {
                pageIndex.value++;
            }
            else {
                alert("已经是最后一页了");
            }
            break;
        case "E":
            pageIndex.value = pageCount.value;
            break;
        default:
            break;
    }

    loadData();
}
//改变每页显示条数
const ChangeSize = () => {
    pageSize.value = Csize.value;
    loadData();
}
//跳转页
const TakeInfo = () => {
    var index = Nindex.value;
    if (index == "") {
        alert("跳转页面不能为空");
        return
    }
    //输入内容为数字
    if (isNaN(Number(index))) {
        alert("跳转页面必需为数字");
        return;
    }
    //输入内容必须大于0
    if (Number(index) <= 0) {
        alert("跳转页面必需大于0");
        return;
    }
    //输入内容必须小于等于总页数
    if (Number(index) > pageCount.value) {
        alert("跳转页面不能大于总页数");
        return;
    }
    pageIndex.value = Number(index);
    loadData();
}



</script>
